<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>登录页</title>
		<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.9.1.js" ></script>
		<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.validate.min.js" ></script>
		<script type="text/javascript" src="${pageContext.request.contextPath }/js/messages_zh.min.js" ></script>
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/indexStyle.css" />
		<script type="text/javascript">
			$(function() {
				$("input").focus(function () {
					$("span.tip").hide();
				});	
				$("#loginForm").validate({
					onsubmit:true,
					errorClass:"valtip",
					rules:{
						"user.username":{
							required:true
						},
						"user.password":{
							required:true
						}
					},
					messages:{
						"user.username":"请输入用户名",
						"user.password":"请输入密码"
					},
					/* errorPlacement:function(error,element) {
						error.appendTo(element.parent().next());
					}, */
					submitHandler:function (form) {
						submitForm();
					}
				});
			});
			//ajax提交表单
			function submitForm() {
				var param = $("#loginForm").serialize();
				var url = "${pageContext.request.contextPath }/user/userAction!userLogin.action";
				$.ajax({
					  type: "POST",
					  url: url,
					  dataType: "json",
					  data:param,
					  success:function(data) {
							if (data.status == 1) {
								window.location.href="${pageContext.request.contextPath }/user/userAction!loginSuccess.action";
							}else {
								$("span.tip").show();
							}
						},
						error:function() {
							alert("登录出现未知错误！");
						}
					});
			}
		</script>
	</head>
	<body>
		
		<div id="loginFormDiv">
			<div id="loginTip">
				
			</div>
			<form id="loginForm">
				<table>
					<tr>
						<td colspan="2" id="loginTip"><span class="tip" style="color:red;display:none">用户名或密码错误！</span></td>
					</tr>
					<tr>
						<td colspan="2" id="loginTitle">
							<legend>用户登录</legend>
						</td>
					</tr>
					<tr>
						<td>
							<label for="usernameinput" required="true">用户名：</label>
						</td>
						<td class="inputtd">
							<input type="text"  class="form-control" id="usernameinput" name="user.username" placeholder="请输入用户名"/>
						</td>
						<td ></td>
					</tr>
					<tr>
						<td>
							<label for="passwordinput">密码：</label>
						</td>
						<td class="inputtd">
							<input type="password" class="form-control" id="passwordinput" name="user.password" placeholder="请输入用户名"/>
						</td>
						<td ></td>
					</tr>
					<tr>
						<td colspan="2" id="btnTd">
							<button  type="submit" class="btn btn-default">登录</button>
						</td>
					</tr>
				</table>
			</form>
		</div>
	</body>
</html>
